<template>
  <div>
    <vol-box
      :lazy="true"
      :model.sync="model"
      title="订单详情"
      :height="600"
      :width="900"
      :padding="25"
    >
      <div id="printTest">
        <el-row>
          <el-col :span="24">
            <div class="grid-content " style="height: 80px;">
              <div class="top">
                <div class="top1">
                  <div style="font-size: 30px;">
                    {{ data.ticketsCode }}
                  </div>
                  <div style="font-size: 15.5px;">
                    {{ data.distributionChannels }}
                  </div>
                </div>
                <div class="top1">
                  <img id="barcode" />
                </div>
              </div>
              <div class="top2">
                {{ data.status }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="border:1px solid #000"> </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="grid-content">订单号：{{ data.order_number }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">下单时间：{{ data.pay_time }}</div>
          </el-col>
          <el-col :span="6" v-show="jlan">
            <a class="grid-content" @click="jlDetShow = true">教练详情</a>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content">
              预定人姓名：{{ this.data.bookingName }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">手机号：{{ data.bookingPhone }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              证件类型：{{
                data.certificate_type == null
                  ? ""
                  : data.certificate_type == ""
                  ? ""
                  : data.certificate_type == 1
                  ? "身份证"
                  : data.certificate_type == 2
                  ? "护照"
                  : data.certificate_type == 3
                  ? "军人证件"
                  : "残疾证件"
              }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">证件号：{{ data.id_card }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div
              class="grid-content"
              style="height:20px;width: 130px; background-color:hsl(0, 0%, 99%);"
            >
              <b>
                <span style="font-size: 17px;">订单信息:</span>
              </b>
            </div>
          </el-col>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">
                预定类型：{{ data.reservationType }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">
                分销渠道：{{ data.distributionChannels }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">分销ID：{{ data.distributionID }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">操作员：{{ data.operator1 }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">会员类型：{{ data.memberType }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">
                是否会员价：{{ data.isMemberPrice }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">短信发送：{{ data.usSms }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">取消时间：{{ data.cancelTime }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">
                订单金额：{{ data.orderTotalPriceSecond }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">商品金额：{{ data.cancePriceSecond }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">
                押金金额：{{ data.paydepositPrice }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">支付时间：{{ data.paymentTime }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">获得积分：{{ data.earnPoints }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">使用积分：{{ data.usePoints }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">押金状态：{{ data.depositAmount }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">
                结算时间：{{ data.settlementTime }}
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">
                使用卡权益：{{ data.useCardRights }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">卡号：{{ data.cardNumber }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">使用优惠券：{{ data.useCoupon }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">券号：{{ data.couponNumber }}</div>
            </el-col>
          </el-row>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div
              class="grid-content bg-purple-dark"
              style="height:20px;width: 130px; background-color: hsl(0, 0%, 99%);"
            >
              <b>
                <span style="font-size: 17px;">项目信息:</span>
              </b>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <div :style="{ margin: '0 left' }">
            <el-table
              border
              :data="list"
              min-width="100%"
              show-summary
              :summary-method="getSummaries"
              max-height="500"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              default-expand-all
              row-key="childrenNumber"
              :tree-props="{ children: 'childrenSecond', hasChildren: 'hasChildrenSecond' }"
            >
              <!-- //<el-table-column type="index" min-width="62%" ></el-table-column> -->
              <el-table-column
                prop="playStartDate"
                label="开始日期"
                min-width="14%"
              ></el-table-column>
              <el-table-column
                prop="playEndDate"
                label="结束日期"
                min-width="14%"
              ></el-table-column>
              <el-table-column
                prop="productName"
                label="产品名称"
                min-width="15%"
              ></el-table-column>
              <el-table-column
                prop="confirmationNo"
                label="确认号"
                min-width="15%"
              ></el-table-column>
              <el-table-column
                prop="userName"
                label="使用人"
                min-width="15%"
              ></el-table-column>
              <el-table-column
                prop="userPhone"
                label="手机号"
                min-width="17%"
              ></el-table-column>
              <el-table-column
                prop="priceSecond"
                label="单价"
                min-width="7%"
              ></el-table-column>
              <el-table-column
                prop="paydepositPrice"
                label="押金"
                min-width="7%"
              ></el-table-column>
              <el-table-column
                prop="num"
                label="数量"
                min-width="7%"
              ></el-table-column>
              <el-table-column
                prop="isTake"
                label="状态"
                min-width="10%"
              ></el-table-column>
              <el-table-column
                v-if="
                  list.some(r => {
                    return r.jsonString && r.jsonString.length != 0;
                  })
                "
                label="操作"
                min-width="10%"
              >
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row)"
                    type="text"
                    size="small"
                    >报名单信息</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-row>
      </div>
      <div slot="footer" class>
        <Button type="info" v-print="printObj">打印</Button>
        <Button type="info" ghost @click="close">关闭</Button>
      </div>
    </vol-box>
    <vol-box
      :lazy="true"
      :model.sync="box2"
      title="报名单信息"
      :height="700"
      :width="800"
      :padding="15"
    >
      <div v-for="(data, index) in jsonList" :key="index">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content">
              {{ data.name || data.text }}:{{ data.value }}
            </div>
          </el-col>
        </el-row>
      </div>
    </vol-box>
    <vol-box
      :lazy="true"
      :model.sync="jlDetShow"
      title="教练详情"
      :width="800"
      :height="500"
      :padding="15"
    >
      <div>
        <div class="dtop">
          <img class="img" :src="jlDetails.url + jlDetails.coach.photo" />
          <div class="mrl20">
            <h2>{{ jlDetails.coach.name }}</h2>
            <ul class="cont">
              <li>联系方式：{{ jlDetails.coach.phone }}</li>
              <li>等级：{{ jlDetails.coach.technologyName }}</li>
              <li>性别：{{ jlDetails.coach.gender == 0 ? "男" : "女" }}</li>
              <li>雪龄：{{ jlDetails.coach.skiAge }}</li>
              <li>教龄：{{ jlDetails.coach.teachingAge }}</li>
              <li>{{ jlDetails.coach.qualifications }}</li>
            </ul>
          </div>
        </div>

        <el-tabs v-model="activeName">
          <el-tab-pane label="详情" name="first">
            {{ jlDetails.coach.description }}
          </el-tab-pane>
          <el-tab-pane label="评价" name="second">
            <el-table :data="evaluateData" style="width: 100%" border stripe>
              <el-table-column label="课程" width="200" prop="itemName" />
              <el-table-column label="分值">
                <template slot-scope="scope">
                  <ul class="lino">
                    <li>
                      综合评分：
                      <star :score="scope.row.score" />
                    </li>
                    <li>
                      安全提示：
                      <star :score="scope.row.safetyTips" />
                    </li>
                    <li>
                      仪容仪表：
                      <star :score="scope.row.appearance" />
                    </li>
                    <li>
                      示范动作：
                      <star :score="scope.row.demoNstrationAction" />
                    </li>
                    <li>
                      沟通表达：
                      <star :score="scope.row.communication" />
                    </li>
                    <li>
                      教学服务：
                      <star :score="scope.row.serviceMode" />
                    </li>
                  </ul>
                </template>
              </el-table-column>
              <el-table-column label="内容" prop="comment" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </vol-box>
  </div>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
import JsBarcode from "jsbarcode";
import star from "./start.vue";

export default {
  components: { "vol-box": VolBox, star: star },
  data() {
    return {
      printObj: {
        id: "printTest",
        popTitle: "订单详情"
      },
      loadKey: true,
      row: {},
      //url: "api/App_Expert/getPageData", //后从加载数据的url
      model: false,
      box2: false,
      list: [],
      data: {},
      jsonList: [],
      jlan: false,
      jlDetShow: false,
      jlDetails: {
        url: "",
        coach: {}
      },
      activeName: "first",
      evaluateData: [],
      numInt: 0,
      afterTwo: 0
    };
  },
  methods: {
    getJLd(num) {
      // console.log(e);
      // let num = 3.64; // 后端穿过来的数据  最大是5
      let str = num + "";
      this.numInt = Math.ceil(num); // 向上取整数
      let temp = str.split(".")[1]; // 获取小数点数据
      this.afterTwo = temp > 10 ? temp : temp + "0"; // 补零避免出现小数点后一位情况, 也可以在接收        后端数据后进行toFixed(2)
      let numFFF = 5 - this.numInt; // 白色五角星的数量
      console.log(this.numInt);
      return this.numInt;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (
          column.label == "单价" ||
          column.label == "押金" ||
          column.label == "数量" ||
          index == 0
        ) {
          if (index === 0) {
            sums[index] = "总价";
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += " ";
          } else {
            sums[index] = "N/A";
          }
        }
      });
      sums[6] = Number(sums[6]).toFixed(2);
      return sums;
    },
    handleClick(row) {
      this.box2 = true;
      this.jsonList = row.jsonString;
    },
    open(row) {
      this.http
        .post("/api/Small_order_second/GetOrderDetailsSecond?ordersecond_id=" + row.ordersecond_id)
        .then(x => {
          this.data = x.data;
          this.list = x.data.orderDetailItemsSecond;
          this.list.forEach(item => {
            if (item.jsonString && item.jsonString != "") {
              item.jsonString = JSON.parse(item.jsonString);
            }
          });
          // console.log(this.list);
          JsBarcode("#barcode", x.data.ticketsCode, {
            format: "CODE128",
            lineColor: "#000",
            width: 2,
            height: 50,
            displayValue: false
          });
        });
      this.model = true;

      let parmas = {
        page: 1,
        rows: 30,
        sort: "create_time",
        order: "desc",
        wheres: `[{"name":"order_id","value":\"${row.id}\","displayType":"select"}]`
      };

      this.http.post("/api/VSmallOrders/GetCoachData", parmas).then(x => {
        if (x.code == 200 && x.status) {
          this.jlan = true;
          this.jlDetails = x.data;
          this.evaluateData = x.data.evaItem.coachEvaluations;
        }
      });
    },
    close() {
      this.model = false;
      this.jlan = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.cont {
  li {
    list-style: none;
    border-bottom: 1px dashed;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
}
.lino {
  li {
    list-style: none;
  }
}

.dtop {
  display: flex;
  .img {
    width: 150px;
  }
  .mrl20 {
    margin-left: 20px;
  }
}
#printTest .el-table__row--level-0 {
  background-color: #ccc !important;
}
#printTest .el-table__row--level-0:hover > td.el-table__cell {
  background-color: #ccc !important;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: hsl(206, 20%, 93%);
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.top1 {
  font-size: 20px;
  float: left;
}

.top {
  font-weight: bold;
}
.top2 {
  font-weight: bold;
  float: right;
  font-size: 25px;
  margin-right: 60px;
  margin-top: 10px;
}
</style>
